<template>
    <!--邀请记录-->
    <div class="app_buyrecord_panel">
        <div class="app_buyrecord_tab">
            <van-row style="background-color:#787ac3 !important;">
                <van-col class="title" span="8">注册时间</van-col>
                <van-col class="title" span="8">用户名</van-col>
                <van-col class="title" span="8">绑定手机</van-col>
            </van-row>
        </div>
        <div class="app_buyrecord_tab" v-for="item,index in dataList" :key="index">
            <div @click="showDataDetail(item)">
                <van-row>
                    <van-col class="word" span="8">{{item.createTime}}</van-col>
                    <van-col class="word" span="8">{{item.invitedUserName}}</van-col>
                    <van-col class="word" span="8">{{item.bindStatusStr}}</van-col>
                </van-row>
            </div>
        </div>
        <ul class="mui-table-view" v-show="noRecord">
            <div class="cmw_noinvest">
                暂无记录!
            </div>
        </ul>
        <van-dialog
                v-model="showDialog"
                title="活动名称"
                show-cancel-button>
            <article>
                <section class="intro-wrapper">
                    <div class="intro-item" v-for="item,index in itemDetail" :key="index">
                        <van-row>
                            <van-col span="8">
                                <div class="intro-text" style="margin-left: 10px"><i></i><span>{{item.title}}</span>
                                </div>
                            </van-col>
                            <van-col span="16">
                                {{item.value}}
                            </van-col>
                        </van-row>
                    </div>
                </section>
            </article>
        </van-dialog>


    </div>
</template>

<script>



    import {Toast, Dialog} from 'vant';
    import Vue from 'vue'
    import Cookies from 'js-cookie';
    Vue.use(Dialog)
    export default {
        name: "Sharerecord",
        data() {
            return {
                token: '',
                dataList: [],
                noRecord: false,
                showDialog: false,
                itemDetail: {},
            }
        },
        mounted() {
            this.token = Cookies.get("token")
            this.fetchRecommendActivityHis()
        },
        methods: {
            // 回退
            goBack() {
                this.$router.push({
                    path: "/recommend_activity"
                });
            },
            fetchRecommendActivityHis() {
                this.$api.personInf.recommendActivityHis({inviterOpenId: this.token}).then(res => {
                    if (res.code == 0) {
                        this.dataList = res.data;
                    } else {
                        Toast(res.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            showDataDetail(item) {
                this.$router.push({
                    path: "/recommend_hisDetail",
                    query: {
                        id: item.id
                    }
                });
            },

        },

    }
</script>

<style lang="less" scoped>
    @import "../../assets/less/base";
    .app_buyrecord_panel {
        font-size: 14px;
        text-align: center;
        margin-top: 0px;
        .app_buyrecord_tab {
            line-height: 28px;
            overflow: hidden;
            width: 100%;
            .title {
                float: left;
                display: inline;
                overflow: hidden;
                font-size: 16px;
                color: #ffffff;
                padding: 10px 0;
            }
            .word {
                float: left;
                display: inline;
                overflow: hidden;
                background: #FFFFFF;
                padding: 5px;
                font-size: 14px;
                color: #2C2C2C;
                border-bottom: 1px solid #F3F3F3;
                text-overflow: ellipsis;
                white-space: nowrap
            }
        }
        .intro-wrapper {
            text-align: start;
            .intro-item {
                height: 20px;
                margin: 20px 0;
                .intro-text {
                    height: 20px;
                    line-height: 20px;
                    padding: 2px 0;
                    color: @front-font-color;
                    i {
                        vertical-align: top;
                        display: inline-block;
                        height: 20px;
                        line-height: 20px;
                        width: 3px;
                        background: url("/images/weixin2/hbg1.png") no-repeat;
                        /*background-color: @main-theme-color;*/
                        /*border-radius: 20%;*/
                    }
                    span {
                        padding-left: 10px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .intro-value {
                    padding: 2px 0;
                    color: @front-font-color;
                    word-wrap: break-word;
                }
                .intro-value.pb50 {
                    padding-bottom: 50px;
                }
            }
        }
        .cmw_noinvest {
            color: orangered;
            padding: 10px;
            text-align: center;
            font-size: 16px;
        }
    }
</style>
